<script setup lang="ts">
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'
import type { FieldValues, PlusColumn } from 'plus-pro-components'
import { useGoodsGroupList } from '@fl/api/advertising-api/goods-group'

import { SearchForm, SearchTable, SubmitBtn } from '@fl/components'
import { ElMessage } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import { PlusDialog } from 'plus-pro-components'
import goodsInfo from './goods-info.vue'

const emits = defineEmits(['update:show', 'confirmGoods'])
const show = defineModel<boolean>('show', { required: true })

const goodsId = ref<number | undefined>()
const goodsInfoVisible = ref<boolean>(false)
const tableRef = ref()
const chooseAdId = ref<number>()
const goodsRecords = ref<any>()

const initialState = {
    activeStatus: 'NO',
    name: '',
}
const state = ref<FieldValues>(cloneDeep(initialState))

const tablePage = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const initialPage = toRaw({ ...tablePage.value })

// 列表
const params = computed(() => ({
    pageNum: tablePage.value.currentPage,
    pageSize: tablePage.value.pageSize,
    ...state.value,
}))
const { data: adsData, isLoading, refetch } = useGoodsGroupList(params)

watchEffect(() => {
    if (adsData.value) {
        goodsRecords.value = cloneDeep(adsData.value.rows)
        tablePage.value.total = adsData.value.total!
    }

    if(show.value) {
        refetch()
    }
})

function submit(values: FieldValues) {
    state.value = { ...values }
    tablePage.value.currentPage = 1
}
function reset() {
    state.value.name = ''
    tablePage.value = initialPage
}
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

// 选择一组商品
function handleRadioChange({ row }) {
    console.log('row', row)
    chooseAdId.value = row.id
}

// 选择/关闭弹窗
function confirm() {
    if(!chooseAdId.value) {
        ElMessage({
            message: '请选择一组商品',
            type: 'warning',
        })
        return
    }
    emits('confirmGoods', chooseAdId.value)
    close()
}
function close() {
    emits('update:show', false)
    goodsId.value = undefined
}

// 查看详情
function showGoodsInfo(row) {
    console.log('row', row)
    goodsId.value = row.id
    goodsInfoVisible.value = true
}

//选择此组
function chooseThis(id: number) {
    console.log('选择此组', id)
    emits('confirmGoods', id)
    close()
}

const columns: PlusColumn[] = [
    {
        label: '搜索关键词',
        prop: 'name',
    },
    // {
    //     fieldProps: {
    //         filterable: true,
    //     },
    //     label: '活动状态',
    //     prop: 'activeStatus',
    //     valueType: 'select',
    //     options: StatusOptions
    // },
]

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { type: 'radio', width: 50 },
        { field: 'name', title: '商品组名称' },
        { field: 'snapshotQuantity', title: '分期数量', width: 80 },
        { field: 'projectQuantity', title: '楼盘/产品数量', width: 80 },
        { field: 'platform', title: '平台类型' },
        { field: 'createTime', title: '创建时间' },
        { field: 'creator', title: '操作人' },
        { field: 'remark', title: '备注' },
        { fixed: 'right', slots: { default: 'operate' }, title: '操作', width: 100 },
    ],
})
</script>

<template>
    <PlusDialog v-model="show" :title="'选择商品组'" width="80%" @close="close" :has-footer="false">
        <SearchForm v-bind="state" :columns="columns" submit-text="搜索" @reset="reset" @submit="submit" />
        <SearchTable ref="tableRef" v-bind="gridOptions" v-model:pager="tablePage" :loading="isLoading"
            :data="goodsRecords" @radio-change="handleRadioChange" @page-change="handlePageChange">
            <template #activeStatus="row">
                <div class="status" :class="[`status-${row.row.activeStatus}`,

                ]">
                    {{ ['未开始', '进行中', '已结束'][row.row.activeStatus] }}
                </div>
            </template>
            <template #operate="{ row }">
                <el-button type="info" text @click="showGoodsInfo(row)">
                    查看
                </el-button>
            </template>
        </SearchTable>


        <div class="mx-auto mt20 flex justify-center">
            <el-button @click="close">
                取消
            </el-button>

            <SubmitBtn type="primary" @click="confirm">
                提交
            </SubmitBtn>
        </div>
    </PlusDialog>

    <goodsInfo v-model:id="goodsId" v-model:show="goodsInfoVisible" @confirm="chooseThis" />
</template>

<style lang="scss" scoped>
:deep(.vxe-header--row .vxe-checkbox--icon) {
    display: none;
}

.status {
    width: 52px;
    height: 24px;
    border-radius: 2px;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    margin: 0 auto;

    &.status-0 {
        background-color: #fff8f0;
        color: #e9810b;
    }

    &.status-1 {
        background-color: #f0fff0;
        color: #18b918;
    }

    &.status-2 {
        background-color: #f2f3f5;
        color: #86909c;
    }
}
</style>